<!DOCTYPE html>
<html>
<head>
    <title>Quantum Well Diagram</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
            background-color: #f0f0f0;
        }
        canvas {
            border: 1px solid #ccc;
            background-color: #fff;
        }
    </style>
</head>
<body>
    <canvas id="physicsCanvas" width="600" height="420"></canvas>
    <script>
        const canvas = document.getElementById('physicsCanvas');
        const ctx = canvas.getContext('2d');

        // Style settings
        ctx.strokeStyle = 'black';
        ctx.fillStyle = 'black';
        ctx.lineWidth = 2.5;
        ctx.lineCap = 'round';

        // Coordinate system parameters
        const ox = 80;
        const oy = 320;
        const axisArrowSize = 8;

        // --- Draw Axes ---
        ctx.beginPath();
        // V(x) axis (main vertical axis)
        ctx.moveTo(ox, canvas.height - 20);
        ctx.lineTo(ox, 20);
        ctx.lineTo(ox - axisArrowSize / 2, 20 + axisArrowSize);
        ctx.moveTo(ox, 20);
        ctx.lineTo(ox + axisArrowSize / 2, 20 + axisArrowSize);
        // x-axis (horizontal)
        ctx.moveTo(ox - 20, oy);
        ctx.lineTo(canvas.width - 20, oy);
        ctx.lineTo(canvas.width - 20 - axisArrowSize, oy - axisArrowSize / 2);
        ctx.moveTo(canvas.width - 20, oy);
        ctx.lineTo(canvas.width - 20 - axisArrowSize, oy + axisArrowSize / 2);
        // ψ(x,0) axis (secondary vertical axis)
        ctx.moveTo(ox, oy);
        ctx.lineTo(ox, oy - 120);
        ctx.lineTo(ox - axisArrowSize / 2, oy - 120 + axisArrowSize);
        ctx.moveTo(ox, oy - 120);
        ctx.lineTo(ox + axisArrowSize / 2, oy - 120 + axisArrowSize);
        ctx.stroke();

        // --- Draw Potential V(x) ---
        const barrier_y = 120;
        const well_y = 240;
        const ww = 75; // well width
        const bw = 40; // barrier width

        const x_start_high = ox + 10;
        const x0 = x_start_high + 30;
        const x1 = x0 + ww;
        const x2 = x1 + bw;
        const x3 = x2 + ww;
        const x4 = x3 + bw;
        const x5 = x4 + ww;
        const x_end_high = x5 + bw + 30;
        
        ctx.beginPath();
        ctx.moveTo(x_start_high, barrier_y);
        ctx.lineTo(x0, barrier_y);
        ctx.lineTo(x0, well_y);
        ctx.lineTo(x1, well_y);
        ctx.lineTo(x1, barrier_y);
        ctx.lineTo(x2, barrier_y);
        ctx.lineTo(x2, well_y);
        ctx.lineTo(x3, well_y);
        ctx.lineTo(x3, barrier_y);
        ctx.lineTo(x4, barrier_y);
        ctx.lineTo(x4, well_y);
        ctx.lineTo(x5, well_y);
        ctx.lineTo(x5, barrier_y);
        ctx.lineTo(x_end_high, barrier_y);
        ctx.stroke();
        
        // --- Draw Dashed Lines ---
        ctx.save();
        ctx.setLineDash([4, 4]);
        ctx.lineWidth = 1.5;

        // Horizontal dashed line
        ctx.beginPath();
        ctx.moveTo(ox, well_y);
        ctx.lineTo(x_end_high - 10, well_y);
        ctx.stroke();

        // Vertical dashed lines
        ctx.beginPath();
        ctx.moveTo(x0, well_y); ctx.lineTo(x0, oy);
        ctx.moveTo(x1, well_y); ctx.lineTo(x1, oy);
        ctx.moveTo(x2, well_y); ctx.lineTo(x2, oy);
        ctx.moveTo(x3, well_y); ctx.lineTo(x3, oy);
        ctx.moveTo(x4, well_y); ctx.lineTo(x4, oy);
        ctx.moveTo(x5, well_y); ctx.lineTo(x5, oy);
        ctx.stroke();
        ctx.restore();

        // --- Draw Wave Function ψ(x, 0) ---
        const wf_amp = 50;
        ctx.beginPath();
        ctx.moveTo(x2, oy);
        ctx.quadraticCurveTo(x2 + ww / 2, oy - wf_amp, x3, oy);
        ctx.stroke();

        // --- Draw Labels and Annotations ---
        ctx.textAlign = 'center';
        ctx.textBaseline = 'middle';
        
        // Axis and Figure labels
        ctx.font = 'italic 24px serif';
        ctx.fillText('V(x)', ox + 30, 40);
        ctx.fillText('x', canvas.width - 25, oy + 20);
        ctx.font = 'italic 22px serif';
        ctx.textAlign = 'right';
        ctx.fillText('ψ(x, 0)', ox - 15, oy - 60);
        ctx.font = 'bold 18px sans-serif';
        ctx.textAlign = 'center';
        ctx.fillText('Fig. 1.18', canvas.width / 2, canvas.height - 25);

        // Annotation 'a'
        const a_y = barrier_y - 25;
        const a_x1 = x4;
        const a_x2 = x5;
        ctx.beginPath();
        ctx.moveTo(a_x1, a_y); ctx.lineTo(a_x2, a_y);
        ctx.moveTo(a_x1, a_y - 5); ctx.lineTo(a_x1, a_y + 5);
        ctx.moveTo(a_x2, a_y - 5); ctx.lineTo(a_x2, a_y + 5);
        ctx.stroke();
        ctx.font = 'italic 22px serif';
        ctx.fillText('a', (a_x1 + a_x2) / 2, a_y - 15);

        // Annotation 'V₀'
        const v0_x = x5 + bw / 2 + 35;
        const v0_y1 = barrier_y;
        const v0_y2 = well_y;
        ctx.beginPath();
        ctx.moveTo(v0_x, v0_y1); ctx.lineTo(v0_x, v0_y2);
        // Arrowhead top (pointing up)
        ctx.moveTo(v0_x, v0_y1); ctx.lineTo(v0_x - 5, v0_y1 + 10);
        ctx.moveTo(v0_x, v0_y1); ctx.lineTo(v0_x + 5, v0_y1 + 10);
        // Arrowhead bottom (pointing down)
        ctx.moveTo(v0_x, v0_y2); ctx.lineTo(v0_x - 5, v0_y2 - 10);
        ctx.moveTo(v0_x, v0_y2); ctx.lineTo(v0_x + 5, v0_y2 - 10);
        ctx.stroke();
        ctx.textAlign = 'left';
        ctx.font = 'italic 24px serif';
        ctx.fillText('V', v0_x + 10, (v0_y1 + v0_y2) / 2);
        ctx.font = 'italic 18px serif';
        ctx.fillText('0', v0_x + 22, (v0_y1 + v0_y2) / 2 + 6);
    </script>
</body>
</html>